import React, { Component, Fragment } from 'react';
import './index.scss';

interface tagObjType {
  title: string;
  child?: any[];
  level?: number;
  order?: any
}

interface PropType {
  toc?: Array<tagObjType>
}

class Toc extends Component<PropType, any> {

  renderItem = (list: Array<tagObjType> ) => {
    return (
      <ul className="toc">
        {
          list.map(item => (
            <li key={item.order}>
              <a className="toc-item" href={`#${item.title}`}>{`${item.title}`}</a>
              {
                item.child && item.child.length ? this.renderItem(item.child) : null
              }
            </li>
          ))
        }
      </ul>
    )
  }

  render() {
    return (
      <div className="toc-wrapper">
        {this.renderItem(this.props.toc || [])}
      </div>
    );
  }
}

export default Toc;
